<!DOCTYPE html>
<html>
  <head>
    <title>Picture-in-Picture video conferencing test</title>
  </head>
  <body>
    <video id="video" preload=auto src='../bigbuck.webm'></video>
  </body>
<script>
const video = document.getElementById('video');

let isMicrophoneActive = false;
let isCameraActive = false;
navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
navigator.mediaSession.setCameraActive(isCameraActive);

async function enterPictureInPicture() {
  await video.play();
  await video.requestPictureInPicture();
  return true;
}

navigator.mediaSession.setActionHandler('togglemicrophone', () => {
  isMicrophoneActive = !isMicrophoneActive;
  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
  document.title = 'togglemicrophone';
});

navigator.mediaSession.setActionHandler('togglecamera', () => {
  isCameraActive = !isCameraActive;
  navigator.mediaSession.setCameraActive(isCameraActive);
  document.title = 'togglecamera';
});

navigator.mediaSession.setActionHandler('hangup', () => {
  document.title = 'hangup';
});
</script>
</html>
